<template>
    <div class="LookEnclosure">
        <el-dialog title="预览附件简历" width="800px" :visible.sync="LookEnclosureFlag" @close="LookEnclosureClose">
			<div class="box">
				<pdf :src="src" v-for="i in numPages" :key="i" :page="i"></pdf>
			</div>
		</el-dialog>
    </div>
</template>

<script>
    import {getSign,getResumeBriny} from '@/api/api'
    import pdf from 'vue-pdf'
    export default {
        //组件注入
        components: {pdf},
        //存放数据
        data() {
            return {
                LookEnclosureFlag: false,
                src: '',
                numPages: undefined,
            }
        },
        //接受父组件传递的值
        props:{
            LookEnclosure: {
                type: Boolean,
                default: false
            }
        },
        //监控data中的数据变化
        watch: {
            LookEnclosure(newVaL){
                this.LookEnclosureFlag = newVaL
                if(this.LookEnclosureFlag){
                    this.lookEnclosure()
                }
            }
        },
        //方法集合
        methods: {
            //弹出关闭
            LookEnclosureClose(){
                this.$emit('LookEnclosureClose')
            },
            //预览简历
            lookEnclosure(){
                let resumeEnclosure = JSON.parse(localStorage.getItem('resumeEnclosure'))
                let sign = ''
                if(resumeEnclosure){
                    //获取签名
                    getSign({
                        'fileId':resumeEnclosure.fileId,
                    }).then(res =>{
                        if(res.code==200){
                            sign = res.result
                            this.src = pdf.createLoadingTask(resumeEnclosure.fileId_dictText+'?sign='+sign)
                            this.src.promise.then(pdf => {
                                this.numPages = pdf.numPages
                            }).catch(err => {
                                this.$message.error('简历预览失败')
                                console.log(err)
                            })
                        }
                    });
                }
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .LookEnclosure{
        .box{height: auto;max-height: 500px;overflow-y: auto;}
    }
</style>